<template>
    <div class="m-products-list">
        <ul>
            <li v-for=" item in nav" :key="item.key" :class="{ 's-nav-active': item.active }">{{ item.name }}</li>
        </ul>
        <el-row>
                <Item  v-for="(item,index) in productList" :key="index" :meta="item"/>
        </el-row>
    </div>
</template>

<script>
import Item from '@/products/item.vue'
import api from '@/api/index.js'

export default {
  name: 'CateList',
  data () {
    return {
      nav: [{
        key: 's-default',
        name: '智能排序',
        active: true
      }, {
        key: 's-price',
        name: '价格最低',
        active: false
      }, {
        key: 's-score',
        name: '人气最高',
        active: false
      }, {
        key: 's-comment',
        name: '评价最高',
        active: false
      }],
      /*
            productList:[
                {
                    image:"	https://p1.meituan.net/biztone/117068888_1652781001234.jpeg@220w_125h_1e_1c",
                    title:"火鸡老店",
                    type:"food",
                    score:4.1,
                    commentNum:0,
                    comment:[
                        {
                            "username":"XXX",
                            "evalaute":"好吃"
                        }
                    ],
                    tab:["火锅","沙河"],
                    address:"湖南衡阳市祁东县步云桥真",
                    "avg-price":64,
                    deal_items:[
                        {
                            title:"火鸡宴,建议10-14人使用",
                            price:909,
                            counter_price:1150,
                            saleNum:0,
                            price_type:"元"
                        }
                    ]
                }
            ] */

      productList: []
    }
  },
  created () {
    api.getProductsList().then(res => {
      this.productList = res.data.data
    })
  },
  components: {
    Item
  }
}
</script>

<style>
</style>
